<template>
  <div class="container">
    <a-affix :offset-top="0">
      <div class="header">
        <div class="content-box header-top">
          <div class="header-logo">
            <img src="../assets/img/logo.png" alt="">
          </div>
          <div class="nav-list" :style="{'--left': `${hoverLeft}px`}" @mouseleave="activeBarBack">
            <div class="nav-item" v-for="(item, index) in nav" :key="index" :ref="`nav-${index}`" :class="{active: active === index}" @click="changeMenu(index, item)" @mouseenter="activeBar(index)">
              {{ item.name }}
            </div>
          </div>
          <div class="login-box">
            登录
          </div>
        </div>
      </div>
    </a-affix>

    <div class="body">
      <router-view/>
    </div>
    <div class="footer">
      <!--<div class="nav">-->
      <!--  <div class="nav-list">-->
      <!--    <div class="nav-item" v-for="(item, index) in footer" :key="index">-->
      <!--      <div class="nav-item-text">{{ item.name }}</div>-->
      <!--      <div class="nav-sub-item" v-for="(subItem, subIndex) in item.children" :key="subIndex">-->
      <!--        {{ subItem.name }}-->
      <!--      </div>-->
      <!--    </div>-->
      <!--  </div>-->
      <!--  <div class="nav-qr">-->
      <!--    <img src="../assets/img/ewm.jpg" alt="">-->
      <!--  </div>-->
      <!--</div>-->
      <!--<div class="copyright">-->
      <!--  <div class="copyright-left">浙ICP备1234567890号-1</div>-->
      <!--  <div class="copyright-right">版权所有@2022-2025 横店影视文化产业大脑</div>-->
      <!--</div>-->
      <a-back-top />
      <div class="footer_box">
        <div class="_copyright">Copyright © 2022-2025 横店影视文化产业大脑 All Rights Reserved </div>
        <!--<div class="icp">浙ICP备1234567890号-1</div>-->
      </div>

      <!--<div class="footer-content">
        <div class="footer-content-left">
          &lt;!&ndash;<div class="footer-content-left-header">东阳市人民政府主办</div>&ndash;&gt;
          <div class="footer-content-left-group">
            <img src="../assets/img/icon-phone.png" alt="">
            0579-86768776
          </div>
          <div class="footer-content-left-group">
            浙ICP备1234567890号-1
          </div>
          <div class="footer-content-left-group">
            <img src="../assets/img/icon-location.png" alt="">
            浙江横店影视产业实验区商务楼
          </div>
          <div class="footer-content-left-group">
            版权所有@2022-2025 横店影视文化产业大脑
          </div>
        </div>
        <div class="footer-content-right">
          <img src="../assets/img/ewm.jpg" alt="">
          官方微信公众号
        </div>
      </div>-->
    </div>
  </div>
</template>

<script>
import _ from 'lodash'

export default {
  name: "PageLayout",
  data() {
    return {
      active: 0,
      hoverLeft: ''
    }
  },
  setup() {
    let videoUrl = require('../assets/img/ban.mp4')
    let nav = [
      {
        name: '首页',
        path: '/home'
      },
      {
        name: '企业办事',
        path: '/Enterprise'
      },
      {
        name: '剧组办事',
        path: '/Playgroup'
      },
      {
        name: '个人办事',
        path: '/Personal'
      },
      {
        name: '基地资源',
        path: '/Base'
      },
      {
        name: '横店影视节',
        // path: '/home',
        href: 'https://hengdianysj.com/'
      },
      {
        name: '了解我们',
        path: '/about'
      }
    ]
    let footer = [
      {
        name: '横店影视节',
        children: [
          {
            name: '文旅节日一',
          },
          {
            name: '文旅节日二',
          }
        ]
      },
      {
        name: '素材超市',
        children: [
          {
            name: '实景基地',
          },
          {
            name: '摄影棚',
          }
        ]
      },
      {
        name: '供应链',
        children: [
          {
            name: '电影出品',
          },
          {
            name: '票房销售',
          }
        ]
      },
      {
        name: '应用中心',
        children: [
          {
            name: '热门应用',
          },
          {
            name: '推荐应用',
          },
          {
            name: '政务应用',
          }
        ]
      },
      {
        name: '浙里办',
        children: []
      },
      {
        name: '咨询中心',
        children: [
          {
            name: '产品资讯',
          },
          {
            name: '行业资讯',
          },
          {
            name: '服务资讯',
          }
        ]
      },
      {
        name: '关于我们',
        path: '/About',
        children: [
          {
            name: '公司介绍',
          },
          {
            name: '联系我们',
          }
        ]
      }
    ]
    return {footer, nav, videoUrl}
  },
  methods: {
    changeMenu(index, data) {
      this.active = index
      this.initActive()
      if (data.path) {
        this.$router.push({
          path: data.path
        })
      } else {
        window.open(data.href,'_blank')
      }

    },
    initActive() {
      let dom = this.$refs[`nav-${this.active}`][0]
      this.hoverLeft = (dom.offsetLeft + dom.offsetWidth / 2 - 15)
    },
    activeBar(index) {
      let dom = this.$refs[`nav-${index}`][0]
      this.hoverLeft = (dom.offsetLeft + dom.offsetWidth / 2 - 15)
      // console.log(dom.offsetLeft, dom.offsetWidth, this.hoverLeft)
    },
    activeBarBack() {
      this.initActive()
    }
  },
  created() {
    let active = _.findIndex(this.nav, ['path', this.$route.path])
    this.active = active >= 0 ? active : 0
  },
  mounted() {
    this.initActive()
  }
}
</script>

<style scoped lang="less">
.container {
  :deep(.ant-affix) {
    z-index: 19;
  }
  .header {
    background: #FFFFFF;
    box-shadow: 0 0 5px 1px #cccccc;
    .header-top {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 60px;
      background: #ffffff;

      .header-logo {
        //margin-right: 80px;
      }

      .nav-list {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 700px;
        flex: 1;
        height: 100%;
        padding: 0 40px;

        &::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: var(--left);
          width: 30px;
          height: 2px;
          background: #3D3125;
          transition: left 500ms;
        }

        .nav-item {
          position: relative;
          height: 100%;
          line-height: 60px;
          font-size: 16px;
          color: #3D3125;
          letter-spacing: 0.96px;
          font-weight: 400;
          cursor: pointer;

          &.active::after {
            content: '';
            position: absolute;
            left: 50%;
            margin-left: -15px;
            bottom: 0;
            width: 30px;
            height: 2px;
            background: #3D3125;
          }

          &:hover {
            color: #9b9b9b;
          }
        }
      }

      .login-box {
        position: relative;
        //margin-left: 30px;
        //padding-left: 30px;
        width: 120px;
        height: 100%;
        line-height: 60px;
        text-align: center;
        font-size: 16px;
        color: #3D3125;
        letter-spacing: 0.96px;
        cursor: pointer;

        &:before {
          content: '';
          position: absolute;
          top: 18px;
          left: 0;
          width: 2px;
          height: 24px;
          background: #cccccc;
        }
      }
    }
  }

  .footer {
    position: relative;
    background: #000000;
    color: #ffffff;
    .footer_box {
      text-align: center; padding: 20px 0; line-height: 30px; font-size: 14px; color: #B8B8B8;
    }


    .footer-content {
      display: flex;
      margin: 0 auto;
      padding-top: 60px;
      width: 1200px;
      .footer-content-left {
        display: flex;
        flex-wrap: wrap;
        text-align: left;
        flex: 1;
        padding-top: 40px;
        .footer-content-left-header {
          width: 100%;
          margin-bottom: 30px;
          font-size: 26px;
          font-weight: 600;
          color: #FFFFFF;
          line-height: 37px;
          letter-spacing: 1px;
        }

        .footer-content-left-group {
          width: 50%;
          margin-bottom: 20px;
          font-size: 16px;
          color: #B8B8B8;
          line-height: 22px;
        }
      }
      .footer-content-right {
        width: 120px;
        font-size: 16px;
        color: #B8B8B8;
        line-height: 22px;
        img {
          width: 120px;
          margin-bottom: 10px;
        }
      }
    }

    .nav {
      //position: absolute;
      display: flex;
      justify-content: space-between;
      //left: 50%;
      width: 1200px;
      margin: 0 auto;
      padding: 40px 0 100px;
      text-align: center;

      .nav-list {
        flex: 1;
        display: flex;
        justify-content: space-between;
        text-align: left;

        .nav-item {
          cursor: pointer;
          .nav-item-text {
            margin-bottom: 20px;
            font-size: 18px;
            color: #FFFFFF;
            letter-spacing: 1.08px;
            font-weight: 400;
          }

          .nav-sub-item {
            margin: 15px 0;
            font-size: 14px;
            color: #B8B8B8;
            letter-spacing: 0.84px;
            font-weight: 400;
          }
        }


      }

      .nav-qr {
        margin-left: 50px;

        img {
          width: 120px;
          height: 120px;
        }
      }
    }
    .copyright {
      display: flex;
      justify-content: center;
      font-size: 14px;
      color: #B8B8B8;
      letter-spacing: 0.84px;
      font-weight: 400;
      .copyright-left {
        margin-right: 30px;
      }
    }
  }
}
</style>
